<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>form表单</title>
		<script type="text/javascript">
			// 表单验证
			/*
			表单验证终止的原理：
			    浏览器解析到submit类型的按钮的事件时，如果有 return false语句被执行，则
				浏览器会终止submit操作，不再将表单发送给服务器。
				
				如果使用的时button，而不是submit类型的按钮进行提交form表单时，
				需要手动调用 form标签对象的submit()方法来手动提交form表单；
				这样就可以根据情况决定是否需要提交表单；
			*/
			function checkMe() {
				// 错误信息变量
				var checkMsg = "";
				// 验证用户名
				// 获取用户名标签对象
				var txtUserName = document.getElementById("userName");
				// 通过value属性获取该text文本框的内容
				var strUserName = txtUserName.value;
				if (strUserName == "") {
					checkMsg += "请输入用户名！\n";
				}

				// 验证密码
				var strUserPsw = document.getElementById("userPsw").value;
				if (strUserPsw == "") {
					checkMsg += "请输入用户密码！\n";
				}

				// 验证邮箱
				var strUserEmail = document.getElementById("userEmail").value;
				if (strUserEmail == "") {
					checkMsg += "请输入用户邮箱！\n";
				}

				// 验证性别
				// 获取所有的单选框对象[标签对象数组]
				var radioSex = document.getElementsByName("userSex");
				// 默认没有选择
				var isCheckedSex = false;
				// 循环所有的单选框对象,验证是否有选定的选项
				for (var i = 0; i < radioSex.length; i++) {
					// 验证每个选项是否选中
					if (radioSex[i].checked) {
						// 有选择的选项,选择标识变量改为true
						isCheckedSex = true;
						// 结束循环
						break;
					}
				}
				// 根据验证信息是否需要提示消息
				if (isCheckedSex == false) {
					// 提示错误信息
					checkMsg += "请选择性别！\n";
				}

				// 验证兴趣
				// 获取所有的多选框对象[标签对象数组]
				var checkHobbys = document.getElementsByName("userHobby");
				// 默认选择的个数为0
				var checkHobbyCount = 0;
				// 循环所有的单选框对象,验证是否有选定的选项
				for (var i = 0; i < checkHobbys.length; i++) {
					// 验证每个选项是否选中
					if (checkHobbys[i].checked) {
						// 有选择的选项,选择标识变量+1
						checkHobbyCount++;
						// 结束循环
						//break; // 需要统计所有选中的个数,不能终止循环
					}
				}
				// 根据验证信息是否需要提示消息
				if (checkHobbyCount < 2) {
					// 提示错误信息
					checkMsg += "请选择兴趣，不能少于2项！\n";
				}

				// 出生年月的验证
				var userMonth = document.getElementById("userMonth");
				// 输出下拉菜单的选择内容
				console.info(userMonth.selected)
				console.info(userMonth.selectedIndex)
				
				if (userMonth.selectedIndex == 0) {
					checkMsg += "请选择出生月份！\n";
				}

				// 根据验证信息是否为空,判定表单验证是否通过
				if (checkMsg == "") {
					// 没有提示信息,验证通过
					return true;
				} else {
					// 验证不通过时,弹出提示信息，并返回false
					alert(checkMsg)
					// 验证不通过
					return false;
				}
			}

			// 手动提交非submit类型的按钮表单
			function checkMe2() {
				alert("请输入用户名！");
				// 验证不通过时,返回false
				document.getElementById("form1").submit();
				//form1.submit();
			}
		</script>
	</head>
	<body>
		<form id="form1" action="#" method="get">
			<table border="1px" cellpadding="5px" cellspacing="0p" width="600px" align="center">
				<tr>
					<td width="30%">用户名:</td>
					<td width="40%"><input type="text" id="userName" name="userName" /></td>
					<td width="30%">登录用户名</td>
				</tr>
				<tr>
					<td width="30%">密码:</td>
					<td width="40%"><input type="password" id="userPsw" name="userPsw" /></td>
					<td width="30%">登录用户名密码</td>
				</tr>
				<tr>
					<td width="30%">邮箱:</td>
					<td width="40%"><input type="email" id="userEmail" name="userEmail" /></td>
					<td width="30%">注册邮箱</td>
				</tr>
				<tr>
					<td width="30%">性别:</td>
					<td width="40%">
						<input type="radio" id="userSexFemale" name="userSex" value="0" />女
						<input type="radio" id="userSexMale" name="userSex" value="1" />男
					</td>
					<td width="30%">选择性别</td>
				</tr>
				<tr>
					<td width="30%">兴趣:</td>
					<td width="40%">
						<input type="checkbox" id="userHobby1" name="userHobby" value="bj" />编程
						<input type="checkbox" id="userHobby2" name="userHobby" value="sduty" />学习
						<input type="checkbox" id="userHobby3" name="userHobby" value="game" />王者荣耀
					</td>
					<td width="30%">选择兴趣</td>
				</tr>
				<tr>
					<td width="30%">出生年月:</td>
					<td width="40%">
						<select id="userYear" name="userYear">
							<option value="2018">2018</option>
							<option value="2019">2019</option>
							<option value="2020">2020</option>
						</select>年
						<select id="userMonth" name="userMonth">
							<option></option>
							<option value="1">1月</option>
							<option value="2">2月</option>
							<option value="3">3月</option>
						</select>月
					</td>
					<td width="30%">选择出生年月</td>
				</tr>
				<tr>
					<td width="30%">头像:</td>
					<td width="40%"><input type="file" id="userImg" name="userImg" /></td>
					<td width="30%">选择头像</td>
				</tr>
				<tr>
					<td width="30%">简介:</td>
					<td width="40%">
						<textarea cols="40" rows="10" id="userIntroduction" name="userIntroduction"></textarea>
					</td>
					<td width="30%">填写个人简介</td>
				</tr>
				<tr align="center">
					<td width="40%" colspan="3">
						<input type="submit" value="提交" onclick="return checkMe();" />
						<!-- <input type="button" value="提交" onclick="checkMe2();" /> -->
						&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="reset" value="重置" />
					</td>

				</tr>
			</table>
		</form>
	</body>
</html>
